<template>
  <div class="tag-list">
    <template v-if="type == 1">
      <div
        v-for="(tag, index) of list"
        :key="tag.id"
        class="trangleTag tag"
        :style="getTagStyle(tag)"
        :class="checkable ? 'checkable' : ''"
        @click="handleTagClick(index)"
      >
        <CheckOutlined v-if="tag.checked" style="margin-right: 4px"/>
        <span class="title">{{ tag.name }}</span>
      </div>
    </template>
    <template v-if="type == 2">
      <div
        v-for="tag of list"
        :key="tag.id"
        class="trangleTag tag"
        :style="getTagStyle(tag)"
      >
        <span class="title">{{ tag.name }}</span>
      </div>
    </template>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { CheckOutlined } from "@ant-design/icons-vue";

const TAG_CLASS = {
  1: "circleTag",
  2: "trangleTag",
};

export default defineComponent({
  name: "TagList",
  components: { CheckOutlined },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 1长的 2长的
    type: {
      type: Number,
      default: 1,
    },
    checkable: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, context) {
    const getTagStyle = (tag) => {
      return {
        background: `rgba(${tag.color.bgColor})`,
        borderColor: `rgba(${tag.color.borderColor}`,
      };
    };

    const handleTagClick = (index) => {
      if (!props.checkable) {
        return;
      }
      context.emit("check", { index, checked: !props.list[index].checked });
    };
    return {
      getTagStyle,
      handleTagClick,
      TAG_CLASS,
    };
  },
});
</script>

<style lang="less" scoped>
@tagSize: 45px;

.tag-circle {
  width: @tagSize;
  height: @tagSize;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tag-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .circleTag {
    &:extend(.tag-circle);
    .checked {
      &:extend(.tag-circle);
    }
  }
  .checkable {
    cursor: pointer;
  }
  .trangleTag {
    padding: 2px 6px;
    border-radius: 4px;
  }
  .tag {
    margin-right: 20px;
    margin-bottom: 10px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid #fff;
    position: relative;
    overflow: hidden;
    .checked {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      font-size: 20px;
      color: #fff;
    }
  }
}
</style>
